<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>
    <link crossorigin="anonymous" integrity="sha384-O/BGwnfw6uRonLZRgEc5L2yiQLzZCGYZiS4qCPvTKbJqXU9XKZwXagTN4EuskkZ4" href="https://lib.baomitu.com/zTree.v3/3.5.01/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">    <!-- Main Styles -->

    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css" media='print'>

    <!-- Dark Themes -->
<!--    <link rel="stylesheet" href="/styles/style-black.min.css">-->
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
</head>

<body>
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div class="card-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
                <!-- /.box-content -->
            </div>
        </div>
    </div>
</div><!--/#wrapper -->
<script src="../static/scripts/html5shiv.min.js"></script>
<script src="../static/scripts/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="../static/layer/layer.js"></script>
<script crossorigin="anonymous" integrity="sha384-GEV+wCDi3CfDUk9X6WjZt772Xgm+2NvPxfBwKQecg4PqJdMJHobJKWNahjcaxuX3" src="https://lib.baomitu.com/zTree.v3/3.5.01/js/jquery.ztree.all.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

<!--<script src="/scripts/modernizr.min.js"></script>-->
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>


<script src="../static/scripts/main.min.js"></script>
<script type="text/javascript">
    let setting = {
        async: {
            enable: true,
            url: "/permission/assignPermissionShow",
            dataFilter: filter
        },
        view: {
            selectedMulti: false,
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
        },
        edit: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename,
        }

    };
    function filter(treeId, parentNode, childNodes) {
        console.log(treeId)
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function beforeRemove(treeId, treeNode) {
        let zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除--" + treeNode.name + "--吗？");
    }

    function onRemove(treeId, treeNode, parentNode) {
        $.ajax({
            url: "/permission/delete",
            data: {"pid": parentNode.pmid},
            type: "post",
            success: function (obj) {
                if (obj.result) {
                    show()
                } else {
                    layer.msg("删除失败", {time: 1000, icon: 5, shift: 6}, function () {
                    })
                }
            }
        })
    }

    function beforeRename(treeId, treeNode, newName) {
        if (newName.length == 0) {
            alert("名称不能为空");
            return false;
        }
        return true;
    }

    function onRename(treeId, treeNode, parentNode) {
        if (parentNode.name != parentNode.pname) {
            $.ajax({
                url: "/permission/update",
                data: {"pid": parentNode.pmid, "name": parentNode.name},
                type: "post",
                success: function (obj) {
                    if (obj.result) {
                        show()
                    } else {
                        layer.msg("修改失败", {time: 1000, icon: 5, shift: 6}, function () {
                        })
                    }
                }
            });
        }
    }

    let newCount = 1;

    function addHoverDom(treeId, treeNode) {
        let sObj = $("#" + treeNode.tId + "_span");
        console.log(sObj)
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        let addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        let btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            let zTree = $.fn.zTree.getZTreeObj("treeDemo");
            let addNodes = zTree.addNodes(treeNode, {
                id: (100 + newCount),
                pmId: treeNode.id,
                name: "new node" + (newCount++)
            });
            $.ajax({
                url: "/permission/add",
                data: {"pid": treeNode.pmid, "pname": addNodes[0].name},
                type: "post",
                success: function (obj) {
                    if (obj.result) {
                        show()
                    } else {
                        layer.msg("添加失败", {time: 1000, icon: 5, shift: 6}, function () {
                        })
                    }
                }
            });
            return false;
        });
    }

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    }

    function show() {
        $.fn.zTree.init($("#treeDemo"), setting);
    }
    $(document).ready(function () {

        layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
            show();
        });//layer
    });//入口

</script>
</body>
</html>